<template>
  <Nav>
    {{ $t('token.log') }}
  </Nav>
  <div class="page-token-log">
    <div class="content">
      <template v-for="item in data.list">
        <div class="box">
          <div class="name wrap"><b>HWD</b> <i :class="item.type">{{ item.type == 'dec' ? '-' : '+' }}</i> {{ item.num }}</div>
          <div class="uuid wrap" v-if="item.relate_info"><md-icon name="switch" /> {{ item.relate_info.uuid }}</div>
          <div class="time">
            {{ $timeFormat(item.created_at) }}
          </div>
        </div>
      </template>
      <div class="page">
        <md-activity-indicator v-if="data.loading" type="carousel" color="#5d62a7" :size="15"></md-activity-indicator>
        <md-button v-else-if="data.page <= data.page_max" type="link" icon="arrow-down" @click="get">{{ $t('page.next') }}</md-button>
      </div>
      <div class="box" v-if="!data.loading && data.list.length == 0">
        <span>{{ $t('page.empty') }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { toast } from '@/style'
import { t } from '@/lang'
import { virtual } from '@/api/user'
import Nav from '@/components/nav.vue'

const data = ref({ 
  page: 1,
  page_max: 1,
  list: [],
  loading: true
})

const get = () => {
  data.value.loading = true
  virtual(data.value.page).then(res => {
    data.value.list.push(...res.data)
    // 记录页码
    data.value.page = res.meta.pagination.current_page + 1
    data.value.page_max = res.meta.pagination.total_pages
  }).finally(() => {
    data.value.loading = false
  })
}

get()

</script>

<style lang="scss" scoped>
  .page-token-log{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;
    background-attachment:fixed;

    .content{
      padding: 130px 30px 0;
    }

    .page{
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .md-button.link{
        color: #5d62a7;
      }
    }

    .box{
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      background-image: linear-gradient(to left, #1f235e, #1d0f5e);
      overflow: hidden;
      position: relative;

      span{
        color: #5d62a7;
        font-size: 14px;
        line-height: 30px;
        text-align: center; 
        display:block;
      }

      .name{
        color: #fff;
        font-size: 18px;
        line-height: 25px;
        overflow: hidden;
        
        b{
         color: rgba(255, 255, 255, .4);
         font-size: 14px;
         padding-right: 5px;
        }
        
        i{
          color: #ffc21b;
          &.dec{
            color: #1cd4b6;
          }
        }
      }
      
      .uuid{
        margin-top: 7px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 30px;
        padding: 0 10px 0 7px;
        color: #5d62a7;
        font-size: 12px;
        line-height: 25px;
        
        i{
          float: left;
          margin: 4px 3px 0 0;
          
          &:before{
            font-size: 16px;
            color: #ffc21b;
          }
        }
      }
      
      .time{
        color: #5d62a7;
        font-size: 14px;
        line-height: 20px;
        margin-top: 7px;
        text-align: right;
      }
    }
  }
</style>